<template>
	<view class="handpickitem">
		<!-- 图片详细 -->
		<navigator  class="images" v-if="!ismore" url="/pages/classlist/classlist">
			<image :src="info.picurl" mode="aspectFill"></image>
			<view class="label">
				2月前更新
			</view>
			<view class="shade">
				{{info.name}}
			</view>
		</navigator>
		<!-- 更多 -->
		<navigator  class="images more" v-else open-type="reLaunch" url="/pages/classify/classify">
			<image :src="info.picurl"></image>
			<view class="shade">
				<uni-icons type="more-filled" size="30" color="#fff"></uni-icons>
				<text>更多</text>
			</view>
		</navigator>
	</view>
</template>

<script setup>
defineProps({
	ismore:{
		type:Boolean,
		default:false
	},
	info:{
		type:Object,
		default:{}
	}
})
</script>

<style scoped lang="scss">
	.handpickitem {
		width: 220rpx;
		height: 345rpx;

		.images {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			border-radius: 15rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.label {
				width: 105rpx;
				height: 30rpx;
				position: absolute;
				top: 0rpx;
				text-align: center;
				background-color: rgb(246, 150, 132);
				font-size: 18rpx;
				color: rgb(239, 229, 211);
				border-bottom-right-radius: 15rpx;
				backdrop-filter: blur(20rpx);
			}

			.shade {
				width: 100%;
				height: 70rpx;
				background-color: rgba(0, 0, 0, .2);
				position: absolute;
				bottom: 0rpx;
				text-align: center;
				line-height: 70rpx;
				color: rgb(239, 229, 211);
				/* 背景模糊样式 */
				backdrop-filter: blur(20rpx);
				font-weight: 600;
			}
		}
		.images.more {
			.shade {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 40rpx;
			}
		}
	}
</style>